<template>

	<el-container class="container">
	<!-- 头部区域 -->
	  <el-header>
		  <div>
			  <img class="header-img" src="../assets/logo.png" alt="logo">
			  <span>电商后台管理系统 </span>
			  <p style="font-size: 5px;margin-left: 10px;"> powered by vue</p>
		  </div>
		  <el-button class="logout" @click="logout">退 出</el-button>
	  </el-header>
	<!-- 主题区域 -->
	  <el-container>
		  <!-- 侧边栏 -->
	    <el-aside :width="asideWidth">
			<div @click="handleCollapse()" class="toggleButton">|||</div>
			<el-menu background-color="#333744" text-color="#fff" :default-active="activePath" active-text-color="orange" :collapse='isCollapse' :collapse-transition='false' unique-opened router>				
			    <el-submenu   v-for="item in menuList" :key="item.id" :index="item.id+''">
			        <template slot="title">
			          <i :class="item.icon"></i>
			          <span>{{item.authName}}</span>
			        </template>
			          <el-menu-item   @click="handleSubItem($event)" class="subItem"  v-for="subitem in item.children" :key="subitem.id" :index="'/'+subitem.path">
						  <i ref="icons" class="el-icon-star-on" ></i>
						  <span>{{subitem.authName}}</span>
					  </el-menu-item>
				</el-submenu>
			</el-menu>
			
		</el-aside>
		<!-- 右侧内容区域 -->
	    <el-main>
			<!-- 路由占位符 -->
		<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
	export default{
		data(){
			return {
					menuList:[],
					icon:['el-icon-s-custom','el-icon-setting','el-icon-goods','el-icon-s-order','el-icon-s-data'],
					isCollapse:false,
					asideWidth:'200px',
					activePath:'',
					iconSession:''
			}
		},
		created(){
			this.getMenuList()
			this.activePath = window.sessionStorage.getItem('activepath')
		},
		methods:{
			//  退出登录
			logout(){
				window.sessionStorage.clear()
				this.$message({
									message: '退出成功',
									center: true
								 })
				this.$router.push('/login')
			},
			//获取左侧边栏的数据
			async getMenuList(){
			const {data:res} = await this.$http.get('menus')
			console.log(res)
			if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
			this.menuList = res.data
			for(let i=0;i<this.menuList.length;i++){
				this.menuList[i].icon=this.icon[i]
			}
			},
			//子菜单点击事件
			handleSubItem(event){
				console.log(event)
				//改变icon样式
						const icons=this.$refs.icons;
						//console.log(icons.length)
						//保持链接激活状态
								this.activePath = event.index
								window.sessionStorage.setItem('activepath',this.activePath) 
			},
			//折叠开启侧边栏
			handleCollapse(){
				this.isCollapse = !this.isCollapse
				if(this.asideWidth === '200px')
				return   this.asideWidth = '64px'
				this.asideWidth = '200px'
			}
		}
		
	}
</script>

<style lang="less" scoped="scoped">
	.container{
		height: 100%;
		box-shadow: 0 0 10px aliceblue;
		
	}
	.header-img{
		width: 50px;height: 50px;

	}
	

	.el-header{
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		padding: 0;
		align-items: center;
		width: 100%;
		color: white;
		font-size: 20px;
		> div{
			display: flex;
			align-items: center;
		}
	}
	.el-aside{
		background-color: #333744;
		> .toggleButton{
			height: 20px;
			background-color: #333744;
			text-align: center;
			color: white;
			cursor: pointer;
			
		}
		>.toggleButton:hover{
			background-color: #444855;
			
		}
		> .el-menu{
			border: 0;
		}
	}
	.el-main{
		background-color: #EAEDF1;
	}
	.logout{
		border-radius: 0;
		margin: 0;
		height: 100%;
		width: 100px;
		background-color: #373d41;
		border-color: #373d41;
		display: block;
		color: white;
	}
	.logout:hover{
		color: orange;
		background-color: dimgray;
		border-color: dimgray;
	}
	
</style>
